import React from 'react'
import  {withRouter}  from 'react-router-dom'
import {Image,Typography} from 'antd'


  const ProductImage2 = ({imageSrc,id,price,size,title,history,location,match}) =>{
    return (
        // 
        // react路由 query 传参 编程导航
        // <div onClick ={()=> history.push(`detail/?name=zs&pass=123456`)}>
        // react路由的post传参  浏览器url看不见 更安全
        // <div  onClick={() =>  history.push({pathname:'/detail', state:{id:id}}) }>
        <div onClick ={()=> history.push(`detail/${id}`)}>
            {
               
                    size == 'large' ?(
                        <Image width={490} height={285} src={imageSrc}></Image>
                    ) :(
                        <Image width={240} height={120} src= {imageSrc}></Image>
                    )
                   
                
            }

            <div>
                <Typography.Text type='secondary'>
                    {title.slice(0,25)}
                </Typography.Text>
                <Typography.Text type='danger'>
                     ￥ {price} 起
                </Typography.Text>
            </div>
        </div>
    )
}

// 嵌套过深 路由信息会丢失 需要用到一个高阶组件 结合 把路由信息重新找回  
// withRouter 解释就是伴随着路由信息
export const ProductImage = withRouter(ProductImage2)